<template>
    <section style="padding: 24px; background:#fff;">
        <div class="table-operator">
            <a-select show-search
                      placeholder="请选择状态"
                      style="width: 200px;margin-right:8px"
                      option-filter-prop="children"
                      @change="changeState"
                      v-model="state">
                <a-select-option v-for="(item,index) in stateList"
                                 :key="index"
                                 :value="item.dicCode">{{item.dicValue}}</a-select-option>
            </a-select>
            <a-select show-search
                      placeholder="文章分类"
                      style="width: 200px"
                      option-filter-prop="children"
                      @change="changeCategory"
                      v-model="category">
                <a-select-option v-for="(item) in categoryList"
                                 :key="item.id"
                                 :value="item.id">{{item.name}}</a-select-option>
            </a-select>
            <a-input-search placeholder="标题关键字"
                            style="width: 250px; margin-left:10px"
                            enter-button
                            @search="onSearch"
                            v-model="keyword" />
            <a-button @click="searchReset">重置</a-button>
        </div>
        <a-table ref="table"
                 bordered
                 :loading='loading'
                 :columns="columns"
                 rowKey="id"
                 :data-source="tbList"
                 :pagination="ipagination"
                 @change="handleTableChange">
            <span slot="action"
                  slot-scope="text, record">
                <a @click="handlePublish(record.id)"
                   v-show="record.statue === '2'">发表</a>
                <a-divider type="vertical"  v-show="record.statue === '2'"/>
                <a @click="handleEdit(record.id)">编辑</a>
                <a-divider type="vertical" v-show="record.statue!=0"/>
                <a href="javascript:;"
                   v-if="record.statue==3"
                   @click="handleTop(record.id)">取消置顶</a>
                <a href="javascript:;"
                   v-else-if="record.statue != '0'"
                   @click="handleTop(record.id)">置顶</a>
                <a-divider type="vertical" v-show="record.statue!=0"/>
                <a-popconfirm cancelText='取消'
                              okText='确定'
                              title="确定删除吗?"
                              @confirm="() => handleDelete(record.id)"
                              placement="topLeft">
                    <a style="color:red" v-show="record.statue!=0">删除</a>
                </a-popconfirm>
            </span>
        </a-table>
    </section>
</template>
<script>
import { listCategories, listArticles, topArticle, deleteArticlePretend, publicDraftArticle } from '@/api/api'
import { isEmpty } from '@/util/util'
const columns = [
    {
        title: '标题',
        dataIndex: 'title',
        align: 'center',
        ellipsis: true,
    }, {
        title: '浏览量',
        dataIndex: 'viewCount',
        align: 'center',
    },
    {
        title: '状态',
        dataIndex: 'statue',
        align: 'center',
        customRender(text) {
            if (text == 0) {
                return '已删除';
            } else if (text == 1) {
                return '已发布';
            } else if (text == 2) {
                return '草稿';
            } else if (text == 3) {
                return '置顶'
            }
        }
    },
     {
        title: '创作类型',
        dataIndex: 'writeType',
        align: 'center',
        customRender(text) {
            if (text == 1) {
                return '原创';
            } else if (text == 2) {
                return '转载';
            } else if (text == 3) {
                return '衍生';
            } 
        }
    },
    {
        title: '摘要',
        dataIndex: 'summary',
        align: 'center',
        ellipsis: true,
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center'
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'edit',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        width: 230
    }
];
export default {
    data() {
        return {
            selectedRowKeys: [],
            loading: false,
            tbList: [],
            columns,
            keyword: '',
            state: undefined,
            category: undefined,
            stateList: [
                { dicCode: 0, dicValue: '已删除' },
                { dicCode: 1, dicValue: '已发布' },
                { dicCode: 2, dicValue: '草稿' },
                { dicCode: 3, dicValue: '置顶' }
            ],
            categoryList: [],
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
        }
    },
    methods: {
        getData(arg) {
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            this.loading = true;
            let pageNo = this.ipagination.current;
            let pageSize = this.ipagination.pageSize;
            let state = isEmpty(this.state);
            let categoryId = isEmpty(this.category);
            listArticles(pageNo, pageSize, state, this.keyword, categoryId).then(res => {
                if (res.code === 200) {
                    this.loading = false;
                    this.ipagination.total = res.data.total ? res.data.total : 0;
                    this.tbList = res.data.records;
                }
            })
        },
        //草稿发表
        handlePublish(record) {
            console.log('record', record);

            publicDraftArticle(record).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.data);
                    this.getData(1);
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        handleEdit(recode) {
            let articleId = recode;
            this.$router.push({
                path: '/content/post-article',
                query: {
                    articleId: articleId
                }
            });
        },
        handleTop(record) {
            topArticle(record).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.data);
                    this.getData(1);
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        handleDelete(record) {
            deleteArticlePretend(record).then(res => {
                if (res.code === 200) {
                    this.$message.success("操作成功!");
                    this.getData();
                } else {
                    this.$message.error("操作失败!");
                }
            })
        },
        onSearch() {
            this.getData(1);
        },
        searchReset() {
            this.keyword = '';
            this.state = this.category = undefined;
            this.getData(1);
        },
        changeCategory() {
            this.getData();
        },
        changeState() {
            this.getData();
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        handleTableChange(pagination, filters, sorter) {
            this.ipagination = pagination;
            this.getData();
        },
        getCatrgoryList(pageNo, pageSize) {
            listCategories(pageNo, pageSize).then(res => {
                if (res.code === 200) {
                    this.categoryList = res.data.records;
                }
            })
        }
    },
    mounted() {
        this.getData();
        this.getCatrgoryList(1, 100);
    },
}
</script>